<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人设置</title>
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/change.js"></script>
    <script src="js/input.js"></script>
</head>
<body>
    <div class="index_header">
        <div class="center">
            <div class="logo"><a href="javascript:">培育计划申报</a></div>
            <div class="state">
                <span>
                    <a href="javascript:">
                        <img src="images/portrait.jpg">李华
                    </a>
                    <ul>
                        <li><a href="javascript:">个人信息</a></li>
                        <li><a href="javascript:">我的消息</a></li>
                        <li><a href="javascript:">修改密码</a></li>
                        <li><a href="javascript:">清除缓存</a></li>
                    </ul>
                </span>
                <span><a  href="javascript:">退出</a></span>
            </div>
        </div>
    </div>
    <div class="index_main">
        <div class="infor">
            <div class="center">
                <div class="po_img"><img src="images/portrait.jpg"></div>
                <div class="content">
                    <div class="name">李华</div>
                    <p class="school">
                        <span>广东石油化工学院</span>
                        <span>网络工程</span>
                    </p>
                    <p class="contact">
                        <span>158****7035</span>
                        <span>15814917035@163.com</span>
                    </p>
                    <div class="infor_bg">
                        <img src="images/vote_bg2.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="nav">
                <div class="center">
                    <ul>
                        <li>
                            <a href="javascript:">
                                <i></i>
                                <span>我的项目</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:">
                               <i></i>
                                <span>我的消息</span>
                            </a>
                        </li>
                        <li class="current">
                            <a href="javascript:">
                                <i></i>
                                <span>个人设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="personal_main">
                <div class="center">


                    <div class="portrait">
                        <img src="images/portrait.jpg" id="pic">
                        <input id="upload" name="file" accept="image/*" style="display: none" type="file">
                        <div class="mask"></div>
                    </div>
                    <p class="img_note">上传图片类型为jpg，png，jpeg，最大不得超过2mb</p>

                    <div class="edit">
                     	<div class="go_edit">
                            <img src="images/go_edit.png">
                        </div>
                        <ul>
                             <li>
                                 真实姓名<input name="" value="李华" readonly="true">
                             </li>
                             <li>
                                 &emsp;&emsp;学号<input name="" value="16034460207" readonly="true">
                             </li>
                             <li>
                                 所属院系
                                 <select disabled="true" id="select">
                                     <option>电信学院</option>
                                     <option>理学院</option>
                                     <option>文法学院</option>
                                     <option>化工学院</option>
                                 </select>
                             </li>
                             <li>
                                 &emsp;&emsp;专业<input name="" value="网络工程" readonly="true">
                             </li>
                             <li>
                                 &emsp;手机号<input name="" value="15814917035" readonly="true">
                             </li>
                             <li>
                                 电子邮箱<input name="" value="2366060971@qq.com" readonly="true">
                             </li>
                        </ul>
                        <div>
                             <button>保存</button>
                             <button id="cancel">取消</button>
                        </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="link">
            <a>友情链接：</a>
            <a href="javascript:">学院概况</a><span></span>
            <a href="javascript:">政策法规</a><span></span>
            <a href="javascript:">服务平台</a><span></span>
            <a href="javascript:">下载专区</a><span></span>
            <a href="javascript:">联系我们</a><span></span>
            <a href="javascript:">后台管理</a>
        </div>
        <div class="msg">
            <p>地址：广东省茂名市茂南区官渡二路139号广东石油化工学院</p>
            <p>联系电话：13900000 <span>邮箱：12455@163.com</span></p>
        </div>
        <span>©2017  广东石油化工学院创新创业学院  版权所有</span>
    </div>
<script>
    $(function () {
        $(".go_edit").click(function () {
        	$(".go_edit").hide();
            $(".edit").find("div:last").show();
            $(".edit").find("input").attr("readonly",false);
           	$("#select").attr("disabled", false);
           	$(".mask").css("display","none");
           	$(".img_note").css("display","block");
        });
        $("#cancel").click(function () {
            $(".edit").find("div:last").hide();
            $(".go_edit").show();
            $(".edit").find("input").attr("readonly",true);
            $("#select").attr("disabled", true);
            $(".mask").css("display","block");
            $(".img_note").css("display","none");
        });
    })
</script>
</body>
</html>